<template>
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<button type="button" class="close" @click="canel"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            	<h4 class="modal-title" id="myModalLabel">交易状态变更</h4>
          	</div>
          	<div class="modal-body">
              <div class="form-group">
                <label class="col-sm-3 control-label">交易状态：</label>
                <div class="col-sm-9">
                  <select class="form-control" v-model="params.confirmStatus">
                    <option value="">请选择</option>
                    <option v-res="{code:'menu_0005_0001_0007_0001'}" v-if="(confirmModal.confirmStatus != '1' && confirmModal.confirmStatus != '2' && confirmModal.confirmStatus != '3')" value="1">认筹</option>
                    <option v-res="{code:'menu_0005_0001_0007_0002'}" v-if="(confirmModal.confirmStatus == '1')" value="4">认筹失败</option>
                    <option v-res="{code:'menu_0005_0001_0007_0003'}" v-if="(confirmModal.confirmStatus != '2' && confirmModal.confirmStatus != '3')" value="2">认购</option>
                    <option v-res="{code:'menu_0005_0001_0007_0004'}" v-if="(confirmModal.confirmStatus == '2')" value="4">退定</option>
                    <option v-res="{code:'menu_0005_0001_0007_0005'}" v-if="(confirmModal.confirmStatus != '3')" value="3">签约</option>
                    <option v-res="{code:'menu_0005_0001_0007_0006'}" v-if="(confirmModal.confirmStatus == '3')" value="4">退房</option>
                  </select>
                </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-3 control-label">备注信息：</label>
                  <div class="col-sm-9">
                    <textarea rows="5" class="form-control" v-model="params.remark" placeholder="请填写备注信息"></textarea>
                  </div>
                </div>
              <div  class="form-group">
                  <!-- <label for="" class="col-sm-1"></label> -->
	                <div class="col-sm-12">
                    <ul class="housing-list" v-show="checkShow ||subscribeShow">
                      <li>
                        <div class="list-info-template col-sm-5">
                            <label for="" class="col-sm-2 control-label">&nbsp;&nbsp;*楼栋：</label>
                          <input type="text" style="width:75px;height:30px;border-radius:4px;margin-left: 20px;" v-model="signParams.buildingName" required>
                        </div>
                        <div class="list-info-template col-sm-5">
                          <label for="" class="col-sm-2 control-label" style="width: 110px;">&nbsp;*房间号：</label>
                          <input type="text" style="width:75px; height:30px; border-radius:4px;margin-left: 20px;" v-model="signParams.roomName" required>
                        </div>
                      </li>
                      <li v-show="signatureShow">
                        <div class="list-info-template col-sm-5">
                          <label for="" class="col-sm-2 control-label" style="width: 110px;">&nbsp;*认购金：</label>
                          <input type="text" style="width:75px; height:30px; border-radius:4px;margin-left: 20px;" v-model="signParams.signatureAmount" required>元
                        </div>
                      </li>
                    </ul>

                    <ul class="housing-list" v-show="checkShow">
                      <li>
                        <div class="list-info-template col-sm-5">
                          <label for="" class="col-sm-2 control-label" style="min-width: 110px;">*计价面积：</label>
                          <input type="text" style="width:75px; height:30px; border-radius:4px;margin-left: 20px;" v-model="signParams.valuationArea" required>㎡
                        </div>
                        <div class="list-info-template col-sm-5">
                          <label for="" class="col-sm-2 control-label" style="min-width: 110px;">*成交总额：</label>
                          <input type="text" style="width:75px; height:30px; border-radius:4px;margin-left: 20px;" v-model="signParams.dealAmount" required>元
                        </div>
                      </li>
                    </ul>
	                </div>
              </div>
              <div class="form-group">
                <label for="" class="col-sm-3 control-label">上传图片：</label>
                <div class="col-sm-9">
                  <uploadFile v-bind:uploadState="fileFlag" v-on:fileList='handleAge' :key="confirmModal.id"></uploadFile>
                </div>
	            </div>
             
          	</div>
          	<div class="modal-footer">
            	<button type="button" class="btn checkedBtn"  @click="save">确定</button>
				<button type="button" class="btn btn-default" @click="canel">取消</button>
          	</div>
        </div>
      </div>
    </div>
</template>

<script>
  import uploadFile from '../uploadFile/uploadFile.vue'
	export default{
		//接收父组件的绑定值
		props: ["confirmModal"],
		data() {
			return {
				//机构信息对象
				params: {
				  id:'',
          confirmStatus:'',
					remark: ''
				},
        signParams:{
          buildingName:'',
          roomName:'',
          valuationArea:'',
          dealAmount:''
        },
        checkShow:false,
        subscribeShow:false,
        remarkShow:true,
        signatureShow:false,
        imgesList:[],
        fileFlag:true
			}
		},
    watch: {
      params:{
　　　　　　handler(curVal,oldVal){
            console.log(curVal);
            if (curVal.confirmStatus == 1 ||  curVal.confirmStatus == 4) {
              this.signatureShow = false;
              this.remarkShow = true;
              this.checkShow = false;
              this.subscribeShow = false;
            }else if (curVal.confirmStatus == 3) {
              this.signatureShow = false;
              this.remarkShow = false;
              this.checkShow = true;
                this.signParams.buildingName=this.confirmModal.buildingName;
                this.signParams.roomName=this.confirmModal.roomName;
            }else if(curVal.confirmStatus == 2){
                this.signatureShow = true;
                this.subscribeShow = true;
                this.remarkShow = false;
                this.checkShow = false;
　　　　　　}},
　　　　　　deep:true
　　　　}
    },
    components: {
			uploadFile,
		},
		methods: {
      save: function() {
          var _self = this;
          _self.params.id = _self.confirmModal.id;
          var body = {};
          body.params = _self.params;
          if (!_self.params.confirmStatus) {
            layer.msg("请选择交易状态!");
            return;
          }
          if(_self.checkParams(_self.params.confirmStatus)){
            return;
          }
          if(_self.params.confirmStatus == 3){
            // body.params.remark = '';
            body.params.buildingName = _self.signParams.buildingName;
            body.params.roomName = _self.signParams.roomName;
            body.params.valuationArea = _self.signParams.valuationArea;
            body.params.dealAmount = _self.signParams.dealAmount;
          }

          if(_self.params.confirmStatus == 2){
              if(!_self.signParams.buildingName){
                  layer.msg("请填写楼栋!");
                  return;
              }
              if(!_self.signParams.roomName){
                  layer.msg("请填写房间号!");
                  return;
              }
              body.params.buildingName = _self.signParams.buildingName;
              body.params.roomName = _self.signParams.roomName;
              body.params.signatureAmount = _self.signParams.signatureAmount;
          }
          var url = _self.utilHelper.apiUrl+'/api/changeCPConfirm';
          body.params.affixList=this.imgesList;
          _self.$http.post(url,body).then((response) =>{
              const res = response.body.resData;
              if(res.result == '1') {
                  layer.msg("变更成功");
                  $('#confirmModal').modal('hide');
                  _self.fileFlag=false;
                  _self.imgesList=[];
                  _self.params={
                    id:'',
                    confirmStatus:'',
                    remark: ''
                  },
                  _self.signParams={
                    buildingName:'',
                    roomName:'',
                    valuationArea:'',
                    dealAmount:'',
                    signatureAmount:''
                  },
                  _self.checkShow = false;
                  _self.$emit('saveConfirmListener');
              }else {
                layer.msg(res.resultMsg, { icon: 7, time: 5000 })
              }
          },(response)=>{
              layer.msg("系统异常");
          });
      },
      canel:function(){
				$('#confirmModal').modal('hide');
        this.fileFlag=false;
        this.params={
				  id:'',
          confirmStatus:'',
					remark: ''
        }
        this.checkShow = false;
      },
      handleAge(data) {
				if(data == '1'){
					this.fileFlag=true;
				}else{
					this.imgesList=data
				}
      },
      checkParams(type){
        var _self = this;
        if(type == 2){
          if(!_self.signParams.buildingName){
            layer.msg("请填写楼栋!");
            return true;
          }
          if(!_self.signParams.roomName){
            layer.msg("请填写房间号!");
            return true;
          }
          if(!_self.signParams.signatureAmount){
            layer.msg("请填写认购金额!");
            return true;
          }
          var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
          if (!reg.test(_self.signParams.signatureAmount)) {
            layer.msg("请填写正确的认购金额!");
            return true;
          }
        }
        if(type == 3){
          if(!_self.signParams.buildingName){
            layer.msg("请填写楼栋!");
            return true;
          }
          if(!_self.signParams.roomName){
            layer.msg("请填写房间号!");
            return true;
          }
          if(!_self.signParams.valuationArea){
            layer.msg("请填写计价面积!");
            return true;
          }
          if(!_self.signParams.dealAmount){
            layer.msg("请填写交易金额!");
            return true;
          }
          var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
          if (!reg.test(_self.signParams.dealAmount)) {
            layer.msg("请填写正确的交易金额!");
            return true;
          }
        }
        return false;
      }
        }
	}
</script>